import { Button, Drawer, Input } from 'antd';
import Color from 'color';
import { CSSProperties, useEffect, useState } from 'react';

import { IconButton, Iconify, SvgIcon } from '@/components/icon';
import { useSettings } from '@/store/settingStore';
import { useResponsive, useThemeToken } from '@/theme/hooks';

import AccountDropdown from '../_common/account-dropdown';
import BreadCrumb from '../_common/bread-crumb';
import NavHorizontal from './nav-horizontal';

import { NAV_COLLAPSED_WIDTH, NAV_WIDTH, HEADER_HEIGHT, OFFSET_HEADER_HEIGHT } from './config';
import Nav from './nav';

import { ThemeLayout } from '@/types/enum';
const { Search } = Input;
import { eventBus, EventNameEnum } from '@/utils/eventBus';

import useWindowWidth from '@/hooks/event/use-window-width';
import { SearchOutlined } from '@ant-design/icons';
import '@/layouts/dashboard/styles/header-style.css';

type Props = {
  className?: string;
  offsetTop?: boolean;
};
export default function Header({ className = '', offsetTop = false }: Props) {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const { themeLayout, breadCrumb } = useSettings();
  const { colorBgElevated, colorBorder } = useThemeToken();
  const { screenMap } = useResponsive();
  const [searchText, setSearchText] = useState('');

  const { windowWidth, isPc } = useWindowWidth();

  const headerStyle: CSSProperties = {
    position: themeLayout === ThemeLayout.Horizontal ? 'relative' : 'fixed',
    // borderBottom:
    //   themeLayout === ThemeLayout.Horizontal
    //     ? ''
    //     // ? `1px dashed ${Color(colorBorder).alpha(0.6).toString()}`
    //     : '',
    backgroundColor: Color(colorBgElevated).alpha(1).toString(),
    display: 'none',
  };

  if (themeLayout === ThemeLayout.Horizontal) {
    headerStyle.width = '100vw';
  } else if (screenMap.md) {
    headerStyle.right = '0px';
    headerStyle.left = 'auto';
    headerStyle.width = `calc(100% - ${themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH
      }px)`;
  } else {
    headerStyle.width = '100vw';
  }

  const sendSearchText = (text: string) => {
    setSearchText(text);
    eventBus.emit(EventNameEnum.sendSearchText, {
      text: text,
    });
  };

  useEffect(() => {
    eventBus.on(EventNameEnum.clearSearchText, () => {
      setSearchText('');
    });
  }, []);

  return (
    <>
      <header className={`z-20 w-full ${className} relative`} style={headerStyle}>
        <div className={`absolute top-4 items-center ${isPc ? 'left-[45%]' : 'left-[30%]'}`}>
          {/* {themeLayout === ThemeLayout.Horizontal ? (<NavHorizontal/>) : null} */}
          {/* <NavHorizontal /> */}
        </div>
        <div
          className="flex flex-grow items-center justify-between px-4 text-gray xl:px-6 2xl:px-10"
          style={{
            height: offsetTop ? OFFSET_HEADER_HEIGHT : HEADER_HEIGHT,
            transition: 'height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
          }}
        >
          <div className="flex items-baseline">
            {themeLayout !== ThemeLayout.Horizontal ? (
              <IconButton onClick={() => setDrawerOpen(true)} className="h-10 w-10 md:hidden">
                <SvgIcon icon="ic-menu" size="24" />
              </IconButton>
            ) : isPc ? (
              <SvgIcon icon="ic-logo" size="200" />
            ) : (
              <SvgIcon className="ml-5" icon="ic-logo-mini" size="40" />
            )}
            <div className="ml-4 hidden md:block">{breadCrumb ? <BreadCrumb /> : null}</div>
          </div>
          <NavHorizontal />
          <div className="flex">
            {/* {isPc && (
              <Input
                placeholder="搜索应用"
                className="custom-input"
                allowClear
                value={searchText}
                onChange={(e) => sendSearchText(e.target.value)}
                style={{
                  marginRight: '15px',
                  height: '32px',
                  width: '240px',
                  borderRadius: '20px',
                  background: '#bfbbc3',
                  border: 'None',
                  color: '#fff',
                }}
                suffix={
                  <Button
                    type="text"
                    icon={<SearchOutlined />}
                    style={{
                      color: '#fff',
                      borderRadius: '16px',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}
                  />
                }
              />
            )} */}
            <AccountDropdown />
          </div>
        </div>
      </header>
      <Drawer
        placement="left"
        onClose={() => setDrawerOpen(false)}
        open={drawerOpen}
        closeIcon={false}
        styles={{
          header: {
            display: 'none',
          },
          body: {
            padding: 0,
            overflow: 'hidden',
          },
        }}
        width="auto"
      >
        <Nav closeSideBarDrawer={() => setDrawerOpen(false)} />
      </Drawer>
    </>
  );
}
